<%--
  Created by IntelliJ IDEA.
  User: WangXin
  Date: 2020/1/6
  Time: 13:57
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <base href="<%=basePath %>">
    <title>报表分析-商品销量排行统计</title>
    <%-- 引用layui.css --%>
    <link rel="stylesheet" type="text/css" href="<%=basePath %>js/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath %>css/common.css"/>
</head>
<body>
<div class="ibox">
    <div class="ibox-content bodycss">
        <!-- 表单搜索 开始 -->
        <section class="panel panel-padding ">
            <form class="layui-form layui-form-pane form-search" onsubmit="return false" method="get">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">服务点</label>
                    <div class="layui-input-inline">
                        <input name="channelName" id="channelName" value="" placeholder="请输入服务点名"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label" style="width: 120px">时间</label>
                    <div class="layui-input-inline">
                        <input name="startDate" id="startDate" value="" placeholder="请选择起始日期"
                               class="layui-input date-item" placeholder="yyyy-MM-dd">
                    </div>
                </div>
                -- &nbsp;&nbsp;
                <div class="layui-form-item layui-inline">
                    <div class="layui-input-inline">
                        <input name="endDate" id="endDate" value="" placeholder="请选择截至日期"
                               class="layui-input date-item" placeholder="yyyy-MM-dd">
                    </div>
                </div>

                <div class="layui-form-item layui-inline"  style="background-color: #1E9FFF">
                    <button class="layui-btn layui-btn-primary" lay-submit lay-filter="search" >
                        <i class="layui-icon"></i> 查询
                    </button>
                </div>
            </form>
        </section>

        <!-- 表单搜索 结束 -->
        <section class="panel panel-padding " >
            <table class="layui-table" id="tableReload" lay-filter="popedomLay"></table>
        </section>


    </div>
</div>
</body>


<script type="text/javascript" src="<%=basePath %>js/layui/layui.js"></script>

<script type="text/javascript">
    layui.config({
        base: "<%=basePath%>js/common/"
    }).use(["common", "element", "layer", "form", "table", "jquery","laydate"], function () {
        var elem = layui.element;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;
        var laydate = layui.laydate;
        layui.common.init();
        //日期
        //同时绑定多个
        lay('.date-item').each(function(){
            laydate.render({
                elem: this
                ,theme: '#393D49'
                ,trigger: 'click'
            });
        });

        table.render({
            elem: "#tableReload"
            , width: 'auto'
            , url: 'analysis/querySalesRankResult.do'
            , page: true //开启分页
            , even: true
            , skin: 'row'
            , limits: [10, 20, 30, 40, 50]
            , limit: 10
            , cols: [[
                {type: 'numbers', title: '序号', width: '120',sort: true}
                , {field: 'times', title: '日期', width: 150, align: 'center' ,sort: true}
                , {field: 'areaName', title: '服务点名称', width: 150, align: 'center'}
                , {field: 'goodsName', title: '商品名称', width: 150, align: 'center'}
                , {field: 'specifications', title: '商品规格', width: 150, align: 'center'}
                , {field: 'goodsType', title: '商品属性', width: 150, align: 'center'}
                , {field: 'gcName', title: '商品类别', width: 150, align: 'center'}
                , {field: 'goodsSaleSum', title: '销量', width: 150, align: 'center' ,sort: true}
            ]]
            , done: function (res) {
               // console.log(res); //接口返回信息
                var data = res.data;
                //console.log(data)

            }
        });

        /**
         * 监听刷新表格
         */
        form.on('submit(search)', function (data) {
            console.log(data.field)
            /*console.log(JSON.stringify(data.field));*/
            table.reload('tableReload', {
                where: data.field,
                page: {
                    curr: 1
                }
            });
            return false;
        });
    });
</script>
</html>
